<template>
  <div class='app-container'>
    <!-- Header部分 -->
    <mt-header fixed title='Vue小案例'>
      <span @click='goBack'  slot="left" v-show="flag">
          <mt-button icon="back">返回</mt-button>    
      </span>        
    </mt-header>
    <!-- router-view部分 -->
    <transition>
      <router-view class='router_view'></router-view>
    </transition>
    <!-- tabbar部分 -->
      <nav class="bar bar-tab">
        <router-link class="tab-item external" to="/home">
          <span class="icon icon-home"></span>
          <span class="tab-label">首页</span>
        </router-link>
        <router-link class="tab-item external" to="/member">
          <span class="icon icon-me"></span>
          <span class="tab-label">会员</span>
         
        </router-link>
        <router-link class="tab-item external" to="/shopcar">
          <span class="icon icon-cart"></span>
          <span class="tab-label">购物车</span>
           <span class="badge" id="badge">{{$store.getters.getAllGoods}}</span>
        </router-link>

        <router-link class="tab-item external" to="/search">
          <span class="icon icon-search"></span>
          <span class="tab-label">搜索</span>
        </router-link>
      </nav>

  </div>
  
</template>

<script>
export default {
  data () {
    return {
      flag:false
    }
  },
  created () {
      this.flag=this.$route.path==="/home"?false:true
  } ,
  methods: {
     // 点击后退
      goBack(){
        this.$router.go(-1);
      }
  },
  watch: {
    "$route.path":function(newVal){
        if(newVal==="/home"){
            this.flag=false;
        }else{
            this.flag=true;
        }
    }
  }
}
</script>

<style lang="scss">
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .router_view{
      flex: 1;
      }
    .app-container{
      padding-top: 40px;
      padding-bottom: 50px;
      overflow-x: hidden;
    }
   * { touch-action: pan-y; } //该代码用于 调用 preventDefault 函数来阻止事件事件行为,用于界面优化
    .v-enter{
      opacity: 0;
      transform: translateX(100%);
    }
    .v-leave-to{
       opacity: 0;
      transform: translateX(-100%);
      position: absolute;
    }

    .v-enter-active,
    .v-leave-active{
      transition: all 0.3s ease;
    }
.mint-header.is-fixed{
  z-index: 10!important;
}

.photo div{
  width: 100%;
  padding: 5px;
}
.my-gallery{
  display: flex;
  flex-wrap: wrap;
}
figure{
  margin: 0;
  width: 32% ;
  height: 100px;
  margin-right: 4px;
  margin-bottom:4px; 
}
figure img{
  width: 100%;
  height: 100%;
}
</style>
